/**
 * create by young (young2f@outlook.com) on 2020/9/15
 */


'use strict';
import React from 'react';
import {connect} from 'dva/index';
import {Button, Form, Popconfirm, Switch, Table, Tabs} from 'antd';
import styles from '../index.less';
import {ModalView} from 'antd-extra';
import ModalDLabel from '../../components/DynamicLabel/modal/ModalDLabel';
import ViewTitle from '../../components/ViewTitle';
import ComponentBase from '../../components/Base/ComponentBase';

const {TabPane} = Tabs;
const _ = require('lodash');
@Form.create()
@connect(({global, user, dynamicLabel}) => ({...global, ...user, ...dynamicLabel}))
export default class LabelConfig extends ComponentBase {
  constructor(props) {
    super(props);

  }

  componentDidMount() {
    const {dispatch} = this.props;
    dispatch && dispatch({
      type: 'dynamicLabel/findLabels', payload: {tenantCode: this.getTenantCode()},
    });
  }



  addLabel = (page) => {
    const data = {required: true, title: '', key: '', type: 'String', inputType: 'Input'};
    data.table = page;
    data.tabsCode = '';
    data.createUser = this.getLoginUser();
    data.createUsername = this.getLoginUsername();
    data.tenantCode = this.getTenantCode();
    data.page = page;
    data.treeId = page;
    ModalView.open(ModalDLabel, {title: '编辑', width: '720px', height: '80%', noStore: true}, {
      data,
      dispatch: this.props.dispatch,
      result: (data) => {
        data.table = page;
        data.code=data.key;
        this.props.dispatch({
          type: 'dynamicLabel/createLabel',
          payload: data,
        }).then(res => {
          this.requestReturn(res);
          this.componentDidMount();
        });
      },
    });

  };

  deleteLabel = record => {
    const {key, labelCode, table} = record;
    this.props.dispatch({
      type: 'dynamicLabel/deleteLabel',
      payload: {key, labelCode, table},
    }).then(res => {
      this.requestReturn(res);
      this.componentDidMount();
    });
  };

  editLabel = record => {
    ModalView.open(ModalDLabel, {title: '编辑', width: '720px', height: '80%', noStore: true}, {
      data: record,
      dispatch: this.props.dispatch,
      result: (data) => {
        this.props.dispatch({
          type: 'dynamicLabel/updateDLabel',
          payload: data,
        }).then(res => {
          this.requestReturn(res);
          this.componentDidMount();
        });
      },
    });
  };
  columns = () => {
    const columns = [
      {title: '配置项名称', dataIndex: 'label', key: 'label'},
      {title: '配置项数据字段', dataIndex: 'key', key: 'key'},
      {
        title: '必填项', dataIndex: 'required', key: 'required',
        render: ((text, record) => {
          return (<Switch
            checkedChildren="是" unCheckedChildren="否"
            checked={text}></Switch>);
        }),
      },
      {
        title: '输入类型', dataIndex: 'inputType', key: 'inputType', render: value => {
          console.log('valuess', value);
          if (value.toString().toLowerCase() === 'input') {
            return '录入';
          }
          if (value.toString().toLowerCase() === 'select') {
            return '选择';
          }
          if (value.toString().toLowerCase() === 'switch') {
            return '开关';
          }
          if (value.toString().toLowerCase() === 'memo') {
            return '备注';
          }
        }
      },

      {
        title: '是否初始字段', dataIndex: 'isInitKey', key: 'isInitKey',
        render: (value => {
          return (<Switch checkedChildren="是" unCheckedChildren="否" checked={value}></Switch>);
        }),
      },
      {
        title: '是否唯一编码', dataIndex: 'isUnique', key: 'isUnique',
        render: (value => {
          return value ? '是' : '否';
        }),
      },
      {
        title: '操作',
        key: 'operation',
        render: (value, record) => {
          const {isInitKey,isUnique} = record;
          return (
             <span>
               {<a style={{marginRight: '6px'}} disabled={isUnique} onClick={() => this.editLabel(record)}>编辑</a>}
              {<Popconfirm
                title="确认删除"
                onConfirm={this.deleteLabel.bind(this, record)}
                okText="是"
                cancelText="否"
              >
                <a disabled={isInitKey}>删除</a>
              </Popconfirm>
              }
            </span>
          );
        },
      },
    ];
    return columns;
  };

  getTabs = page => {
    const {dLabels} = this.props;
    console.log('routess dlabel ',dLabels)
    let list = dLabels && dLabels.length ? dLabels.filter(item => item.table === page) : undefined;
    return (
      <div>
        {
          <ViewTitle
            title={'配置项列表'}
            level={2}
            actions={<Button type="primary" onClick={this.addLabel.bind(this, page)}>添加</Button>}></ViewTitle>
        }
        <Table
          className='antTable'
          bordered={true}
          columns={this.columns()}
          dataSource={list}
          pagination={false}></Table>
      </div>
    );
  };

  render() {
    return (
      <div className={styles.content}>
        <ViewTitle
          title={'表头标签定义'}
        ></ViewTitle>

        <Tabs defaultActiveKey="1">

          <TabPane tab="物料属性定义" key="2">
            {this.getTabs('Material')}
          </TabPane>
          <TabPane tab="订单属性定义" key="3">
            {this.getTabs('SalesOrder')}
          </TabPane>
          {/*<TabPane tab="客户属性定义" key="4">*/}
          {/*  {this.getTabs('customer')}*/}
          {/*</TabPane>*/}
          <TabPane tab="采购单属性定义" key="5">
            {this.getTabs('ProcureOrder')}
          </TabPane>
          {/*<TabPane tab="供应商属性定义" key="6">*/}
          {/*  {this.getTabs('supplier')}*/}
          {/*</TabPane>*/}
        </Tabs>
      </div>
    );
  }
}
